<template>
  <div class="goods-page" v-loading="loading">
    <div class="title">我的收藏（全部商品：{{ query.total }}）</div>
    <div class="goods-query">
      <div class="select">
        <div class="input">
          <el-checkbox
            :indeterminate="!allselect && indeterminate"
            v-model="allselect"
            @change="allSelectGoods"
            >全选</el-checkbox
          >
          <a class="link" @click="removeFavo">删除</a>
        </div>
        <div class="search">
          <el-input
            placeholder="输入商品名称，并按回车键确定"
            prefix-icon="el-icon-search"
            v-model="query.search"
            @keypress.native.enter="getGoodsList"
            size="small"
          >
          </el-input>
        </div>
      </div>
      <div class="filter">
        <div class="all" @click="setAllGoods" :class="{ active: allgoods }">
          全部
        </div>
        <div class="day" :class="{ active: query.status !== null }">
          {{ daySelect }}
          <icon name="iconxiangyoubeifen16" />
          <div class="sub">
            <div class="item" @click="setStatus(0)">7天内</div>
            <div class="item" @click="setStatus(1)">30天内</div>
            <div class="item" @click="setStatus(2)">90天内</div>
            <div class="item" @click="setStatus(3)">半年内</div>
          </div>
        </div>
        <div class="buy" :class="{ active: query.purchase !== null }">
          {{ buySelect }}
          <icon name="iconxiangyoubeifen16" />
          <div class="sub">
            <div class="item" @click="setPurchase(0)">最常购买</div>
            <div class="item" @click="setPurchase(1)">已购买</div>
            <div class="item" @click="setPurchase(2)">未购买</div>
          </div>
        </div>
      </div>
    </div>
    <div class="goods-list">
      <GoodsItem1
        :goods="item"
        :select="true"
        @select="selectGoods(index)"
        v-for="(item, index) in goodsList"
        :key="index"
      />
    </div>
    <center>
      <Pages1
        v-model="query.current"
        :size="query.length"
        :count="query.total"
      />
    </center>
  </div>
</template>

<script>
import api from "@/api";
import GoodsItem1 from "@/components/GoodsItem/GoodsItem1";
import Pages1 from "@/components/Pages/Pages1.vue";
import { mapState } from "vuex";

export default {
  name: "UserCoupon",
  components: { GoodsItem1, Pages1 },
  computed: {
    ...mapState("user", ["userinfo"]),
    indeterminate() {
      let select = false;
      this.goodsList.forEach((item) => {
        if (item.select) select = true;
      });
      return select;
    },
    allgoods() {
      return this.query.status == null && this.query.purchase == null;
    },
    daySelect() {
      let status = this.query.status;
      if (status === null) return "范围";
      else if (status === 0) return "7天内";
      else if (status === 1) return "30天内";
      else if (status === 2) return "90天内";
      else if (status === 3) return "半年内";
      else return "范围";
    },
    buySelect() {
      let purchase = this.query.purchase;
      if (purchase === null) return "购买";
      else if (purchase === 0) return "最常购买";
      else if (purchase === 1) return "已购买";
      else if (purchase === 2) return "未购买";
      else return "购买";
    },
  },
  watch: {
    "query.current": function () {
      this.getGoodsList();
    },
  },
  data() {
    return {
      loading: false,
      goodsList: [],
      allselect: false,
      query: {
        current: 1,
        length: 8,
        total: 0,
        search: "",
        status: "",
        purchase: "",
      },
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    selectGoods(index) {
      this.$set(this.goodsList[index], "select", !this.goodsList[index].select);
      let allselect = true;
      this.goodsList.forEach((item) => {
        if (!item.select) allselect = false;
      });
      this.allselect = allselect;
      console.log(this.allselect);
      this.$forceUpdate();
    },
    allSelectGoods(val) {
      this.goodsList.forEach((item, index) => {
        this.$set(this.goodsList[index], "select", val);
      });
    },
    removeFavo() {
      let ids = [];
      this.goodsList.forEach((item) => {
        if (item.select) ids.push(item.good_id);
      });
      if (ids.length > 0) {
        api.GOODS_COLLECTION_ALL({ id: ids, status: 0 }).then((res) => {
          console.log(res);
          this.getGoodsList();
        });
      }
    },
    async getGoodsList() {
      this.loading = true;
      let result = await api.GOODS_COLLECTION_LIST(this.query);
      this.query.current = result.current;
      this.query.length = result.length;
      this.query.total = result.total;
      this.goodsList = result.data;
      this.loading = false;
    },
    setStatus(val) {
      this.query.current = 1;
      this.query.status = val;
      this.getGoodsList();
    },
    setPurchase(val) {
      this.query.current = 1;
      this.query.purchase = val;
      this.getGoodsList();
    },
    setAllGoods() {
      this.setStatus("");
      this.setPurchase("");
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-page {
  .title {
    font-size: 20px;
    font-weight: 600;
    color: #333333;
    line-height: 28px;
    margin-bottom: 25px;
  }
  .goods-query {
    margin-bottom: 5px;
    .select {
      margin-bottom: 25px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .input {
        font-size: 16px;
        color: #333333;
        ::v-deep .el-checkbox {
          .el-checkbox__label {
            font-size: 16px;
            padding-left: 16px;
            margin-right: 20px;
          }
        }
        .link {
          cursor: pointer;
          &:hover {
            color: #d52c1a;
          }
        }
      }
      .search {
        width: 320px;
      }
    }
    .filter {
      height: 46px;
      background: #ffffff;
      border: 1px solid #f0f0f0;
      display: flex;
      align-items: stretch;
      font-size: 14px;
      color: #333333;
      line-height: 20px;
      .active {
        font-weight: 600;
        color: #d52c1a;
      }
      .all {
        width: 108px;
        cursor: pointer;
        border-right: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 20px;
      }
      .day,
      .buy {
        position: relative;
        width: 131px;
        cursor: pointer;
        border-right: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 20px;
        i {
          padding-left: 10px;
          color: #979797;
        }
        i::before {
          display: block;
          transition: all 0.2s;
        }
        &:hover {
          i::before {
            display: block;
            transform: rotate(90deg);
          }
          .sub {
            display: block;
          }
        }
        .sub {
          position: absolute;
          display: none;
          z-index: 10;
          top: 100%;
          left: 0;
          .item {
            width: 180px;
            padding-left: 20px;
            height: 36px;
            background: #ffffff;
            border: 1px solid #f0f0f0;
            display: flex;
            box-sizing: border-box;
            align-items: center;
            color: #333333;
            font-weight: 400;
            &:hover {
              color: #d52c1a;
            }
          }
        }
      }
    }
  }
  .goods-list {
    padding: 19px 0;
    min-height: 650px;
    ::v-deep .goods-item {
      border: 1px solid #f3f3f3;
    }
    & > div:nth-child(4n + 1) {
      margin-left: 0;
    }
  }
}
</style>
